<template>
  <view class="box">
    <view @click="toDetail">
      <view class="title-box">
        <view v-if="!isCollect && agent" class="instead">
          <text>代</text>
        </view>

        <text
          v-if="!isCollect && statusObj.text"
          class="status"
          :style="{ background: statusObj.color }"
        >
          {{ statusObj.text }}
        </text>
        <text class="title font-bold" :class="[statusObj.class, isCollect ? 'ov-2' : 'ov-1']">
          {{ title }}
        </text>
      </view>
      <view class="industry-box">
        <view class="industry ov-1" :class="[statusObj.class]">
          <text>{{ boType === BoTypeEnum.Demand ? '行业要求：' : '所属行业：' }}</text>
          <text>{{ industryCategoryNames }}</text>
        </view>
        <view class="cooperation-type">{{ cooperationTypeName }}</view>
      </view>

      <view
        v-if="!isCollect && [ BoStatusEnum.Active,BoStatusEnum.Closed,BoStatusEnum.Expired].includes(boStatus!)"
      >
        <view class="statistics mt-8">
          <view class="num-box">问题：{{ questionNum }}</view>
          <TButtonRedPoint text="查看" @click="toQuestionNum" :point-num="questionWaitReplyNum" />
          <view class="num-box">合作意向：{{ cooperationNum }}</view>
          <TButtonRedPoint text="查看" @click="tocooperation" :point-num="waitMatchNum" />
        </view>
      </view>
      <view v-if="isCollect" class="collect">
        <text
          v-if="boStatus === BoStatusEnum.Expired || boStatus === BoStatusEnum.Closed"
          class="expire-status"
        >
          已失效
        </text>
        <text class="update-time">更新于：{{ updateTime || publishTime }}</text>
        <view class="statistics">
          <view>
            <text class="ali-icon">&#xe6cd;</text>
            <text>{{ cooperationNum }}</text>
          </view>
          <view>
            <text class="ali-icon">&#xe8bf;</text>
            <text>{{ browseNum }}</text>
          </view>
        </view>
      </view>
    </view>

    <view v-if="!isCollect" class="btns">
      <TButtonGroup
        :styles="{
          backgroundColor: '#fff',
          justifyContent: 'flex-end',
          borderTop: '1px solid #EBEDF0',
          paddingTop: '24rpx',
          paddingRight: '32rpx',
          paddingBottom: 0,
          gap: '24rpx',
        }"
        :position="'static'"
      >
        <TButton
          v-if="boStatus !== BoStatusEnum.Reviewing"
          text="供需管理"
          type="none"
          icon="&#xe634;"
          :customStyle="{
            display: 'inline-block',
            backgroundColor: '#F2F3F5',
            color: '#333333',
            border: 'none',
          }"
          custom-class="h-24 linh-24 br-12"
          @click="handleManage"
        />
        <TButton
          v-if="boStatus === BoStatusEnum.Active"
          icon="&#xe6b9;"
          text="转发供需"
          type="none"
          :customStyle="{
            display: 'inline-block',
            backgroundColor: '#F2F3F5',
            color: '#333333',
            border: 'none',
          }"
          custom-class="h-24 linh-24 br-12"
          @click="handleShare"
        />
      </TButtonGroup>
    </view>
    <TImage
      class="corner-mark"
      width="80rpx"
      height="80rpx"
      :src="`https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/${
        boType === BoTypeEnum.Supply ? 'supply-icon' : 'demand-icon'
      }-1.png`"
    />
  </view>
</template>
<script setup lang="ts">
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import TImage from '@/components/TImage/index.vue';
  import {
    BoStatusEnum,
    BoTypeEnum,
    CooperationDurationTypeEnum,
  } from '@/enums/businessOpportunitiesEnum';
  import { computed, type PropType } from 'vue';
  import { dateUtil } from '@/utils/dateUtil';
  import { propTypes } from '@/utils/propTypes';
  import { navigateTo } from '@/router';
  import TButtonRedPoint from '@/components/TButtonRedPoint/index.vue';

  const props = defineProps({
    id: propTypes.number,
    /** 是否是收藏列表 */
    isCollect: {
      type: Boolean,
      defualt: false,
    },
    /**供需状态 */
    boStatus: {
      type: Number as PropType<BoStatusEnum>,
    },
    /**是否代理 */
    agent: {
      type: Number,
    },
    /**标题 */
    title: {
      type: String,
    },
    /**行业分类子级名称，多个用逗号分隔 */
    industryCategoryNames: {
      type: String,
    },
    /**合作类型 */
    cooperationTypeName: {
      type: String,
    },
    /**合作期限类型 */
    cooperationDurationType: {
      type: Number as PropType<CooperationDurationTypeEnum>,
    },
    /**合作期限日期 */
    cooperationDatetime: {
      type: String,
    },
    /** 收藏人数 */
    collectPeopleNum: {
      type: Number,
    },
    /** 浏览人数 */
    browseNum: {
      type: Number,
    },
    /** 合作次数 */
    cooperationNum: {
      type: Number,
    },
    /**供需类型 */
    boType: {
      type: Number as PropType<BoTypeEnum>,
    },
    /** 发布时间 */
    publishTime: propTypes.string,
    /**更新时间 */
    updateTime: propTypes.string,
    /** 问题 */
    questionNum: propTypes.number,
    /**待回复数量 */
    questionWaitReplyNum: propTypes.number,
    /**待联系数量 */
    waitMatchNum: propTypes.number,
  });
  const emits = defineEmits(['manage', 'detail', 'tocooperation', 'share']);

  const handleShare = () => {
    emits('share');
  };

  const handleManage = () => {
    emits('manage');
  };

  const toDetail = () => {
    emits('detail');
  };

  const tocooperation = () => {
    emits('tocooperation');
  };

  const toQuestionNum = () => {
    navigateTo({
      name: 'singleQuestionManage',
      options: {
        id: props.id,
        boType: props.boType!,
        title: props.title!,
      },
    });
  };
  const statusObj = computed(() => {
    if (props.boStatus === undefined) return {};
    return (
      {
        [BoStatusEnum.Draft]: {
          color: '#c8cacc',
          text: '草稿',
          class: '',
        },
        [BoStatusEnum.Active]: {},
        [BoStatusEnum.Expired]: {
          color: '#c8cacc',
          text: '已失效',
          class: 'expire',
        },
        [BoStatusEnum.Closed]: {
          color: '#c8cacc',
          text: '已失效',
          class: 'expire',
        },
        [BoStatusEnum.Reviewing]: {
          color: '#2878ff',
          text: '审核中',
          class: '',
        },
        [BoStatusEnum.ReviewFailed]: {
          color: '#EA5E0E',
          text: '已驳回',
          class: '',
        },
        [BoStatusEnum.Invalid]: {
          color: '#c8cacc',
          text: '已失效',
          class: 'expire',
        },
        default: {},
      }[props.boStatus] || {}
    );
  });
</script>
<style lang="scss" scoped>
  .box {
    padding: 24rpx;
    background-color: #fff;
    border-radius: 32rpx;
    position: relative;
    overflow: hidden;
    .expire {
      color: #c8cacc !important;
    }
    .title-box {
      display: flex;
      align-items: center;
      gap: 8rpx;
      .instead {
        color: #fff;
        background-color: #2878ff;
        border-radius: 20rpx;
        padding: 4rpx 8rpx;
        color: #fff;
        font-size: 24rpx;
        line-height: 32rpx;
        white-space: nowrap;
      }
      .status {
        border-radius: 20rpx;
        padding: 4rpx 8rpx;
        color: #fff;
        font-size: 24rpx;
        line-height: 32rpx;
        white-space: nowrap;
      }
      .title {
        color: #000;
        font-size: 32rpx;
        line-height: 48rpx;
      }
    }
    .industry-box {
      display: flex;
      align-items: center;
      gap: 32rpx;
      margin-top: 16rpx;
      justify-content: space-between;
      .industry {
        color: #333;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .cooperation-type {
        border-radius: 4rpx;
        background: #d0f7ff;
        padding: 4rpx 12rpx;
        color: #2878ff;
        font-size: 20rpx;
        line-height: 28rpx;
        white-space: nowrap;
      }
    }

    .cooperation-period {
      margin-top: 16rpx;
      overflow: hidden;
      color: #333;
      font-size: 24rpx;
      line-height: 32rpx;
    }

    .statistics {
      display: flex;
      align-items: center;
      gap: 16rpx;
      .num-box {
        color: #646566;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .divide {
        width: 2rpx;
        height: 24rpx;
        background-color: #c8cacc;
        margin: 0 20rpx;
      }
    }
    .collect {
      margin-top: 16rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #969799;
      font-size: 24rpx;
      line-height: 32rpx;
      .expire-status {
        color: #ea5e0e;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .statistics {
        display: flex;
        align-items: center;
        gap: 24rpx;
        .ali-icon {
          margin-right: 8rpx;
        }
      }
    }
    .btns {
      margin-top: 16rpx;
    }
    .corner-mark {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>
